<template>
  <div class="layout-container">
    <!-- 左侧菜单 -->
    <el-menu
      class="side-menu"
      default-active="student"
      @select="handleMenuSelect"
    >
      <el-sub-menu index="1">
        <template #title><span class="submenu-title">管理</span></template>
        <el-menu-item index="student">学生管理</el-menu-item>
        <el-menu-item index="teacher">教师管理</el-menu-item>
        <el-menu-item @click="goBack">退出学生管理中心</el-menu-item>
      </el-sub-menu>
    </el-menu>

    <!-- 右侧内容 -->
    <div class="content-area">
      <StudentManage v-if="activeMenu === 'student'" />
      <TeacherManage v-if="activeMenu === 'teacher'" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import StudentManage from "../management/Student.vue";
import TeacherManage from "../management/Teacher.vue";
import { useRouter } from "vue-router";

const activeMenu = ref("student");
const router = useRouter();

function goBack() {
  router.back();
}

function handleMenuSelect(key) {
  activeMenu.value = key;
}
</script>

<style scoped>
/* 整体布局 */
.layout-container {
  display: flex;
  height: 100vh;
  background-color: #f5f7fa;
}

/* 左侧菜单 */
.side-menu {
  width: 240px;
  min-width: 240px;
  background-color: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  height: 100%;
  overflow-y: auto;
}

.submenu-title {
  font-weight: 600;
}

/* 右侧内容 */
.content-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background-color: #f9fafc;
}

/* 响应式 */
@media screen and (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }
  .side-menu {
    width: 100%;
    min-width: 0;
    box-shadow: none;
  }
  .content-area {
    padding: 16px;
  }
}
</style>
